<template>
  <div class="blog-list-container">
    <el-table
      :data="data"
      border
      style="width: 100%"
    >

      <!-- 文章序号 -->
      <el-table-column
        prop="date"
        label="序号"
        align="center"
        width="100"
      >
        <template slot-scope="scope">{{ scope.$index + (currentPage - 1) * eachPage + 1}}</template>
      </el-table-column>

      <!-- 文章名称 -->
      <el-table-column
        prop="title"
        label="文章名称"
        width="200"
        align="center"
        :show-overflow-tooltip='true'
      >
        <template slot-scope="scope">
          <el-popover
            title="博客预览图"
            width="230"
            effect="light"
            placement="bottom"
            trigger="hover"
          >
            <el-image
              style="width:200px"
              fit="contain"
              :preview-src-list="srcList"
              :src="scope.row.thumb"
            ></el-image>
            <a
              href="#"
              style="text-align:center"
              target="_blank"
              @click.prevent="goToTitleUrl(scope.row)"
              slot="reference"
            >{{ scope.row.title }}</a>
          </el-popover>
        </template>
      </el-table-column>

      <!-- 文章描述 -->
      <el-table-column
        prop="description"
        label="文章描述"
        width="200"
        align="center"
        :show-overflow-tooltip='true'
      >
        <!-- :show-overflow-tooltip='true' 超出范围省略号 -->
        <template slot-scope="scope">{{ scope.row.description }}</template>
      </el-table-column>

      <!-- 浏览数 -->
      <el-table-column
        prop="scanNumber"
        label="浏览数"
        width="120"
        align="center"
      >
        <template slot-scope="scope">{{ scope.row.scanNumber }}</template>
      </el-table-column>

      <!-- 评论量 -->
      <el-table-column
        prop="commentNumber"
        label="评论量"
        align="center"
        width="120"
      >
        <template slot-scope="scope">{{ scope.row.commentNumber }}</template>
      </el-table-column>

      <!-- 所属分类 -->
      <el-table-column
        prop="category"
        label="所属分类"
        align="center"
        width="120"
      >
        <template slot-scope="scope">{{ scope.row.category === null ? '未分类' : scope.row.category.name}}</template>
      </el-table-column>

      <!-- 创建日期 -->
      <el-table-column
        prop="createDate"
        label="创建日期"
        width="260"
        align="center"
      >
        <template slot-scope="scope">{{ scope.row.createDate }}</template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column
        label="操作"
        align="center"
      >
        <!-- 操作和编辑按钮 -->
        <template slot-scope="scope">
          <el-row>
            <!-- 编辑按钮 -->
            <el-tooltip
              class="item"
              content="编辑"
              placement="top-start"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="editBannerHandler(scope.row)"
              ></el-button>
            </el-tooltip>

            <!-- 删除按钮 -->
            <el-tooltip
              class="item"
              content="删除"
              placement="top-start"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteButton(scope.row)"
                circle
              ></el-button>
            </el-tooltip>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top:20px"
      class="pageList"
      background
      :page-size="eachPage"
      :page-sizes="[5, 8, 20]"
      layout="prev, pager, next, ->, total, sizes, jumper"
      :total="totalCount"
      @size-change="sizeChangeHandle"
      @current-change="currChangeHandle"
      @prev-click="prevClickHandle"
      @next-click="nextClickHandle"
    >
    </el-pagination>
  </div>
</template>

<script>

import { getBlog, deleteBlog } from "@/api/blog"
import { formatDate } from '@/utils/formatDate';
import { Server_url, FromLocalHost_url } from "@/SERVER_URL"

export default {
  data() {
    return {
      data: [],//数据
      srcList: [], //存放预览图片的数组
      eachPage: 5, //每一页显示的条数
      currentPage: 1, //当前页码
      totalPage: 0, //总页数
      totalCount: 0,//数据总条数
      pagerCurrentPage: 1, //分页当前页码
    }
  },
  created() {
    this.getFetch()
  },
  methods: {
    /* 点击修改按钮后 */
    editBannerHandler(blogInfo) {
      this.$router.push(`/editBlog/${blogInfo.id}`)
    },

    /* 点击删除按钮后 */
    deleteButton(blogInfo) {
      /* 弹出警告是否删除 */
      this.$confirm('删除文章后, 该文章相关的所有评论也会一并消除, 是否继续', '是否删除此篇文章', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          //点击了确定 执行下面
          deleteBlog(blogInfo.id).then(() => {
            this.getFetch();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
    },

    /* 跳转到图片的具体文章的地址 */
    goToTitleUrl(result) {
      window.open(`${FromLocalHost_url}/article/${result.id}`)
    },

    /* 获取分页博客 */
    getFetch() {
      getBlog(this.currentPage, this.eachPage).then((result) => {
        this.data = result.data.rows;
        // 循环文章数据数组
        for (var res of this.data) {
          res.createDate = formatDate(res.createDate);
          res.thumb = Server_url + res.thumb;
          this.srcList.push(res.thumb);
        };

        // 组件的总数据数(totalCount)等于获取到的data数据的总数据数(total)
        this.totalCount = result.data.total;

        // 取得 总页数 = 总数据条 / 每页显示条数
        this.totalPage = Math.ceil(this.totalCount / this.eachPage);

        // 设置分界 (当前页数大于总页数或者小于最小页数)
        if (this.currentPage > this.totalPage) { //当前页数超出
          this.currentPage = this.totalPage;
          this.getFetch();
        }
      })
    },
    // pageSize 改变时会触发 改变每一页显示的条数
    sizeChangeHandle(numberPage) {
      this.eachPage = parseInt(numberPage);
      this.currentPage = 1;
      this.getFetch();
    },
    // currentPage 改变时会触发
    currChangeHandle(numberPage) {
      this.currentPage = parseInt(numberPage);
      this.getFetch();
    },
    // 用户点击上一页按钮改变当前页后触发
    prevClickHandle() {
      this.currentPage -= 1;
    },
    // 	用户点击下一页按钮改变当前页后触发
    nextClickHandle() {
      this.currentPage += 1;
    },
  }
}
</script>
<style lang="scss" scoped>
.blog-list-container {
  padding: 40px;
}
.blog-list-container .pageList {
  margin-top: 30px;
}
</style>